<template>
	<view class="search">
		<!-- head -->
		<view class="head">
			<view>
				<icon type="search" size="18"/>
				<input placeholder="商品搜索" 
							 confirm-type="search" 
							 type="text" focus="true" 
							 @confirm="searchWords" 
							 @input="tipssearch" 
							 @focus="inputFocus" 
							 v-model="words"/>
				<icon type="clear" size="18" @click="clearInput"/>
			</view>
			<view @click="cancel" class="del">取消</view>
		</view>
		<!-- searchtips -->
		<view class="searchtips" v-if="words">
			<view v-if="tipsData.length !== 0">
				<view @click="searchWords" :data-value="item.name" v-for="(item,index) in tipsData" :key="index">{{item.name}}</view>
			</view>
			<view class="nogoods" v-else>数据库暂无此类商品</view>
		</view>
		<!-- history -->
		<view class="history" v-if="historyData.length !== 0">
			<view class="t">
				<view>历史记录</view>
				<view @click="clearHistory"></view>
			</view>
			<view class="cont">
				<view @click="searchWords" :data-value="item.keyword" v-for="(item,index) in historyData" :key="index">{{item.keyword}}</view>
			</view>
		</view>
		<!-- hotsearch -->
		<view class="history hotsearch">
			<view class="t">
				<view>热门搜索</view>
			</view>
			<view class="cont">
				<view @click="searchWords" :data-value="item.keyword" :class="{active:item.is_hot === 1}" v-for="(item,index) in hotKeywordList" :key="index">{{item.keyword}}</view>
			</view>
		</view>
		<!-- 商品列表 -->
		<view class="goodsList" v-if="listData.length !== 0">
			<view class="sortnav">
				<view @click="changeTab(0)" :class="[0 === nowIndex ? 'active' : '']">综合</view>
				<view @click="changeTab(1)" :class="[1 === nowIndex ? 'active' : '']" class="price">价格</view>
				<view @click="changeTab(2)" :class="[2 === nowIndex ? 'active' : '']">分类</view>
			</view>
			<view class="sortlist">
				<view @click="goodsDetail(item.id)" class="item" v-for="(item,index) in listData" :key="index">
					<image :src="item.list_pic_url"></image>
					<view class="name">{{item.name}}</view>
					<view class="price">￥{{item.retail_price}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				words:'',
				openid:'',
				historyData:[],
				hotKeywordList:[],
				tipsData:[],
				order:'',
				listData:[],
				nowIndex:0
			}
		},
		mounted(){
			this.openid = uni.getStorageSync('openId') || ''
			this.getHotData()
		},
		methods: {
			//删除input内容
			clearInput(){
				this.words = ''
				this.listData = []
			},
			//取消搜索
			cancel(){
				uni.switchTab({
					url:'../index/index'
				})
			},
			//清空历史记录
			async clearHistory(){
				const data = await this.$request({
					url:'/search/clearhistoryAction',
					method:"POST",
					data:{
						openId:this.openid
					}
				})
				if(data){
					this.historyData = []
				}
			},
			//input聚焦
			inputFocus(){
				//商品清空
				this.listData = []
				//展示搜索提示信息
				this.tipssearch()
			},
			//实时监控input内容发送请求
			async tipssearch(){
				const data = await this.$request({
					url:'/search/helperaction',
					data:{
						keyword:this.words
					}
				})
				this.tipsData = data.data.keywords
				console.log(data)
			},
			//用户输入法点击搜索
			async searchWords(e){
				let value = e.currentTarget.dataset.value
				this.words = value || this.words
				const res = await this.$request({
					url:'/search/addhistoryaction',
					method:"POST",
					data:{
						openId:this.openid,
						keyword:this.words
					}
				})
				//获取历史记录
				this.getHotData()
				this.getlistData()
			},
			//获取历史记录
			async getHotData(first){
				const data = await this.$request({
					url:'/search/indexaction?openId=' + this.openid
				})
				this.historyData = data.data.historyData
				this.hotKeywordList = data.data.hotKeywordList
			},
			//获取商品列表
			async getlistData(){
				const data = await this.$request({
					url:'/search/helperaction',
					data:{
						keyword:this.words,
						order:this.order
					}			
				})
				this.listData = data.data.keywords
				console.log(data)
			},
			//tab变色,重新请求数据
			changeTab(index){
				this.nowIndex = index
				if(index === 1){
					this.order = this.order == 'asc' ? 'desc' : 'asc'
				}else{
					this.order = ''
				}
				this.getlistData()
			},
			//点击跳转到商品详情页
			goodsDetail(id){
				uni.navigateTo({
					url:'../goods/goods?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss">
.search{
	height: 1300rpx;
	position: relative;
	background-color: #eee;
	.head{
		display: flex;
		height: 91rpx;
		padding: 0 32rpx;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
		border-bottom: 1rpx solid rgba(0,0,0,0.15);
		view:nth-child(1){
			height: 59rpx;
			display: flex;
			align-items: center;
			background-color: #f4f4f4;
			icon{
				padding: 0 10rpx;
			}
			input{
				display: inline-block;
				width: 480rpx;
				height: 59rpx;
				margin-left: 10rpx;
			}
		}
	}
	.searchtips{
		position: absolute;
		width: 100%;
		top: 91rpx;
		bottom: 0;
		left: 0;
		box-sizing: border-box;
		padding: 0 32rpx;
		z-index: 99;
		background-color: #fff;
		overflow-y: scroll;
		-webkit-overflow-scrolling:touch;
		view{
			view{
				padding: 20rpx;
			}
		}
		.nogoods{
			text-align: center;
			margin-top: 300rpx;
		}
	}
	.history{
		background: #fff;
		padding: 32rpx;
		.t{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 30rpx;
			view:nth-child(2){
				width: 55rpx;
				height: 55rpx;
				background: url('../../static/image/delete.png') no-repeat;
				background-size: 70% 70%;
			}
		}
		.cont{
			display: flex;
			flex-wrap: wrap;
			view{
				padding: 10rpx;
				border:1rpx solid #999;
				margin: 0 30rpx 20rpx 0;
			}
			.active{
				border: 1rpx solid #b4282d;
				color: #b4282d;
			}
		}
	}
	.hotsearch{
		margin-top: 20rpx;
	}
	.goodsList{
		position: absolute;
		width: 100%;
		top: 91rpx;
		bottom: 0;
		left: 0;
		box-sizing: border-box;
		padding: 0 32rpx;
		z-index: 99;
		background-color: #fff;
		overflow-y: scroll;
		.sortnav{
			display: flex;
			width: 100%;
			height: 78rpx;
			line-height: 78rpx;
			background: #fff;
			border-bottom: 1rpx solid #d9d9d9;
			view{
				width: 250rpx;
				height: 100%;
				text-align: center;
			}
			.active{
				color: #b4282b;
			}
			.active.desc{
				background: url(../../static/image/向上.png) no-repeat;
				background-size: 15rpx 21rpx;
			}
			.active.asc{
				background: url(../../static/image/向下.png) no-repeat;
				background-size: 15rpx 21rpx;
			}
		}
		.sortlist{
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			.item{
				box-sizing: border-box;
				width: 50%;
				text-align: center;
				background-color: #fff;
				padding: 15rpx 0;
				border-bottom: 1rpx solid #d9d9d9;
				border-right: 1rpx solid #d9d9d9;
				image{
					display: block;
					width: 302rpx;
					height: 302rpx;
					margin: 0 auto;
				}
				.name{
					margin: 15rpx 0 22rpx 0;
					text-align: center;
					padding: 0 20rpx;
					font-size: 24rpx;
				}
				.price{
					text-align: center;
					font-size: 30rpx;
					color: #b4282d;
				}
			}
			.item:nth-child(2n){
				border-right: none;
			}
			.item.active:nth-last-child(1){
				border-bottom: none;
			}
			.item.active:nth-last-child(2){
				border-bottom: none;
			}
			.item.none:last-child{
				border-bottom: none;
			}
		}
	}
}
</style>
